<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="ZhangBin">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>js_sdk测试</title>
    <link rel="shortcut icon" href="https://zhangbin.xin/static/img/Head.png" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <h3> hello 公众号!</h3>
    <span>请使用微信客户端打开链接才测试</span><br>
    点击右上角，<br>
    选择分享到微信朋友圈、<br>
    分享给微信朋友、<br>
    分享给QQ好友、<br>
    分享到QQ空间、<br>
    分享到腾讯微博<br>

    <hr>

    <input id="uploadImg" class="btn btn-danger" value="图 片 上 传 测 试 接 口 "/>
    <div id="imgprev">

    </div>
</div>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript" src="http://home.zhangbin.xin/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    //var uri = "http://zhnagbinxx.oicp.io/";
    var uri = "https://zhangbin.xin/";
    var link = window.location.href;
    var imgUrl = uri + "static/img/Head.png";
    $.ajax({
        url: uri + "jssdk/getSign.zb",
        type: "GET",
        dataType: "JSON",
        async: false,
        data: {url: location.href.split("#")[0]},
        success: function (data) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appid, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名
                jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone", "chooseImage", "uploadImage"] // 必填，需要使用的JS接口列表
            });
        }, error: function () {
            alert("获取验证信息出错了哦！")
        }
    })
    $("#uploadImg").click(function () {
        wx.chooseImage({
            count: 3,//默认9
            needResult: 1,
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (data) {
                localIds = data.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                for (var i = 0; i < localIds.length; i++) {
                    $("#imgprev").append("<img src='" + localIds[i] + "'width='80' />");
                    uploadImg(localIds[i]);
                }
            },
            fail: function (res) {
                alert(res);
            }
        });
    });

    function uploadImg(localId) {
        wx.uploadImage({
            localId: localId,
            success: function (res) {
                //将serverId上传至服务器
                $.ajax({
                    type: "POST",
                    url: uri + "/wxFileUpload/imgUpload.zb",
                    data: {serverId: res.serverId},
                    success: function (data) {
                        if (data && data == 'false') {
                            alert("上传成功！");
                        }
                    }
                });
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });
    }

    wx.ready(function () {
        //分享给微信好友
        wx.onMenuShareAppMessage({
            title: '微信朋友分享接口测试（标题）', // 分享标题
            desc: '这仅仅是一个微信公众号接口测试，这是一个描述body', // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                alert("分享成功")
            },
            cancel: function () {
                alert("取消分享")
            }
        });

        //分享到微信朋友圈
        wx.onMenuShareTimeline({
            title: '微信朋友圈分享接口测试（标题）', // 分享标题
            link: link, // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
                alert("分享成功");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                alert("取消分享")
            }
        });
        //分享到QQ空间
        wx.onMenuShareQZone({
            title: '微信js_sdk测试', // 分享标题
            desc: '微信公众号JS_SDk分享到QQ空间测试（这是一段描述信息）', // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                alert("分享成功")
            },
            cancel: function () {
                alert("取消分享")
            }
        });
        //分享到QQ好友
        wx.onMenuShareQQ({
            title: '微信js_sdk测试（标题）', // 分享标题
            desc: '微信公众号JS_SDk分享到QQ好友测试（这是一段描述信息）', // 分享描述
            link: link, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function () {
                alert("分享成功")
            },
            cancel: function () {
                alert("取消分享")
            }
        });
    });

    wx.error(function () {
        alert("权限注入失败！")
    });
</script>
</body>
</html>
